<template>
  <el-table :data="value" border style="width: 100%">
    <el-table-column label="序号" align="center" width="50px">
      <template slot-scope="scope"><span>{{scope.$index+( currentPage - 1) * pageSize + 1}}  </span></template>
    </el-table-column>
    <el-table-column align="center" show-overflow-tooltip class-name="el-card__body"
                     v-for="(item, index) in tableColumnAttributes"
                     :key="index"
                     :prop="item.value"
                     :label="item.name"
                     :width="item.type === 'cascader' ? 180 : (typeof(item.width) === 'undefined' ? (tableColumnAttributes.length > 5 ? 150 : '' ) : item.width)"
    >
      <div v-if="item.type === 'input' && !row.deleted"  slot-scope="{row}">
        <el-input v-model="row[''+item.value+'']" clearable :readonly="readOnly" :maxlength="item.maxlength"/>
      </div>
      <div v-else-if="item.type === 'text' && !row.deleted" slot-scope="{row}">
        <span>{{ isNaN(row[''+ item.value +''] * row[''+ item.value1 +'']) ? 0 : row[''+ item.value +''] * row[''+ item.value1 +''] }}</span>
      </div>
      <div v-else-if="item.type === 'date' && !row.deleted"  slot-scope="{row}">
        <el-date-picker v-model="row[''+item.value+'']" :readonly="readOnly" style="width: 160px" type="date"  value-format="yyyy-MM-dd" placeholder="选择时间"/>
      </div>
      <div v-else-if="item.type === 'select' && !row.deleted" slot-scope="{row}">
        <el-select clearable v-model="row[''+ (item.valueId ? item.valueId : item.value) +''] " :readonly="readOnly" placeholder="请选择" >
          <el-option
            v-for="items in item.options"
            :key="items.id"
            :value="items.id"
            :label="items.value">
          </el-option>
        </el-select>
      </div>
      <div v-else-if="item.type === 'cascader'" slot-scope="{row}">
        <el-cascader
          :readonly="readOnly"
          v-model="row[''+ (item.valueId ? item.valueId : item.value) +''] "
          :options="listDegreeData(item.options)"
          :props="{ expandTrigger: 'hover' }"
          :show-all-levels="true"
          @change="item.change"
          placeholder="请选择" >
        </el-cascader>
      </div>
      <div v-else>
        <span>{{ row[''+item.value+''] }}</span>
      </div>
    </el-table-column>
    <el-table-column label="操作" fixed="right" v-if="hasAction" align="center" width="100px">
      <template slot-scope="scope">
        <div v-if="scope.row.tempId == 0">
          <el-button type="text" size="small" v-if="showSaveButton" @click="addRow(scope.row)">保存</el-button>
        </div>
        <div v-if="scope.row.tempId != 0">
          <div v-if="!scope.row.deleted">
            <el-button type="text" size="small" style="color:red;" v-if="showDeleteButton" @click="deletedRow(scope.row)">删除</el-button>
          </div>
          <div v-if="scope.row.deleted">
            <el-button type="text" :disabled="true" v-if="showDeleteButton" size="small">删除</el-button>
          </div>
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
  import { getListDegreeData } from '@/utils/index'
  export default {
    name: 'operationTable',
    props: {
      readOnly: { type: Boolean, default: false },
      hasAction: { type: Boolean, default: false },
      showDeleteButton: { type: Boolean, default: true },
      showSaveButton: { type: Boolean, default: true },
      isAddData: { type: Boolean, default: true },
      currentPage: { type: Number, default: 1 },
      pageSize: { type: Number, default: 10 },
      tableColumnAttributes: { type: Array, default: () => [] },
      value: { type: Array, default: () => [] }
    },
    async created() {
      if (this.isAddData) {
        this.value.unshift({ tempId: 0 })
      }
    },
    methods: {
      listDegreeData(dict) {
        return getListDegreeData(dict)
      },
      addRow(row) {
        this.value.forEach((value, index, arr) => {
          if (row.id === value.id) {
            value.tempId = index + 1
          }
        })
        this.value.unshift({ tempId: 0 })
      },
      updateRow(row) {
        this.value.forEach((value, index, arr) => {
          if (row.id === value.id) {
            row.tempType = 'update'
            arr[index] = row
          }
        })
        this.$emit('table-data-list', this.value)
      },
      deletedRow(row) {
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(async() => {
            this.value.forEach((value, index, arr) => {
              if (row.id) {
                if (value.id === row.id) {
                  this.value.splice(index, 1)
                }
              } else {
                if (value.tempId === row.tempId) {
                  this.value.splice(index, 1)
                }
              }
            })
          })
          .catch(() => { })
      }
    }
  }
</script>
<style scoped>

</style>
